<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style data-app-loading="inject-css">
      html {
        /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
        line-height: 1.15;
      }

      .loading {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #f4f7f9;

        /* transition: all 0.8s ease-out; */
      }

      .loading.hidden {
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transition: all 0.8s ease-out;
      }

      .title {
        margin-top: 38px;
        font-size: 28px;
        font-weight: 600;
        color: rgb(0 0 0 / 85%);
      }

      .loader {
        display: inline;
        height: 50px;
        width: 50px;
        animation: loading-rotate 2s linear infinite;
      }
      .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: #409eff;
        stroke-linecap: round;
      }
      @keyframes loading-rotate {
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes loading-dash {
        0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -40px;
        }

        to {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -120px;
        }
      }
    </style>
  </head>
  <body>
    <div class="loading">
      <svg class="loader" viewBox="0 0 50 50">
        <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
      </svg>
      <div class="title">
        <img width="200" src="./logo-text.png" />
      </div>
    </div>
  </body>
</html>
